<script setup lang="ts">
import { ref } from 'vue'

// defineProps<{ msg: string }>()

// const count = ref(0)
const msg = ref('Hello Vue!!')
const fruits = ref(['苹果', '香蕉', '橙子', '葡萄'])
function changeFruit() {
  fruits.value = ['草莓', '芒果', '西瓜', '樱桃']
}
const ok = ref(true)
</script>

<template>
  <h1>message: {{ msg }}</h1>
  <div>
    <input v-model="msg" placeholder="请输入新消息">
    <button @click="msg = 'Hello Vue!!!!'">重置消息</button>
    
  </div>
  <div>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">
        {{ index + 1 }}. {{ fruit }}
      </li>
    </ul>
    <button @click="fruits = ['草莓', '芒果', '西瓜', '樱桃']">更换水果</button>
    <button @click="changeFruit">更换水果click</button>
    {{ ok ? 'YES' : 'NO' }}
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
  color: #666;
}
</style>
